
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送表情极简demo</title>
</head>
<body>
<style>
    body{
        font-family:arial;
        font-size: 14px;
        color: #333;
        line-height: 1.42857143;
    }
    .chatbox {
        margin-bottom: 20px;
    }

    pre.code{
        padding:5px;
        border:1px solid #ccc;
        background:#f5f5f5;
        border-radius:3px;
        font-family:arial;
        line-height:2;
    }
    p {
        margin: 5px;
        margin-left: 0;
    }
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 30px;
    }
    ol li {
        margin-bottom: 10px;
    }
    ol ol, ol ul, ul ol, ul ul {
        padding-left: 17px;
    }
    .support-list{
        background:#f5f5f5;
        line-height: 2;
        font-size: 12px;
    }
    .doc-content {
        font-size: 13px;
        background:#f5f5f5;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    a {
        cursor: pointer;
        color: #337ab7;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }

    pre {
        margin: 0;
        border: none;
        background-color: #f5f5f5;
        padding: 9.5px;
        font-size: 13px;
    }
    .table-bordered, td, tr, th {
        border: 1px solid #ddd;
    }


    .chatbox-emoji-btn {
        margin-left: 1%;
    }

    .chatbox-emoji-panel {
        margin-left: 1%;
        width: 50%;
    }
    .chatbox-message {
        margin-left: 1%;
        width: 50%;
        height: 150px;
        font-size: 14px;
    }
    .chatbox-show {
        float: right;
        width: 365px;
        height: 150px;
        border: 1px solid black;
        overflow: auto;
        margin-right: 2%;
    }
    .chatbox-btn {
        margin-left: 1%;
        padding: 2px 5px;
    }

</style>

<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.js"></script>

<script>
    function setupExpand(expandId) {
        var expandDom = document.getElementById(expandId);
        var display = expandDom.style.display;
        display = display === "none" ? "block" : "none";
        expandDom.style.display = display;
    }
</script>

<div class="chatbox">
    <h2>发送表情极简demo</h2>
        <div class="chatbox-tools">
        <div class="chatbox-tools-emoji">
            <a href="javascript:" class="chatbox-emoji-btn" id="chatbox-emoji-btn">发送表情</a>
            <div class="chatbox-emoji-panel" id="chatbox-emoji-panel"></div>
        </div>
    </div>
    <div class="chatbox-show" id="chatbox-show"></div>
    <textarea class="chatbox-message" id="chatbox-message">今天心情很不错[笑嘻嘻]</textarea>
    <p>
{{--            <a class="chatbox-btn" id="symbol-emoji">SymbolToEmoji</a>--}}
{{--            <a class="chatbox-btn" id="emoji-symbol" onclick="emojiToSymbol">EmojiToSymbol</a>--}}
{{--            <a class="chatbox-btn" id="emoji-html" onclick="emojiToHtml">EmojiToHtml</a>--}}
        <a class="chatbox-btn" id="symbol-html" onclick="symbolToHtml">发送</a>
    </p>
{{--        <p>--}}
{{--            <a class="chatbox-btn" id="symbol-emoji-invalid">SymbolToEmoji( 不支持emoji时, 原生emoji字符显示为 [emoji] )</a>--}}
{{--        </p>--}}
</div>


<script>
    /*
    发送表情极简Demo
     */
    (function(){
        var chatbox  = document.getElementById("chatbox-message");     //输入内容的文本区
        var btn      = document.getElementById("chatbox-emoji-btn");   //展开表情区的点击按钮
        var panel    = document.getElementById("chatbox-emoji-panel"); //存储表情的div盒子
        var chatshow = document.getElementById("chatbox-show");        //聊天内容的展示区域

        var RongIMEmoji = RongIMLib.RongIMEmoji;

        var config = {
            size: 24,
            url: '//cdn.ronghub.com/emojis-hd.png?replace', // 传入服务器路径
            // url: 'https://cdn.ronghub.com/res/emojis-hd.png?replace', // 传入本地路径
            lang: 'zh'
        };

        //初始化
        RongIMEmoji.init();
        // RongIMEmoji.init(config);
        appendChild('init: 初始化RongIMEmoji');

        //展开表情区的点击按钮
        btn.onclick = function(){
            panel.style.display = "block";
            var emojis = getEmojiDetailList();  //含有表情信息的html 代码
            bindClickEmoji(emojis);
            return false;
        };

        // //表情文字 【转】emoji表情
        // var symbolToEmojiBtn = document.getElementById("symbol-emoji");
        // symbolToEmojiBtn.onclick = function(){
        //     var message = chatbox.value;  //文本消息区输入的内容
        //     message = RongIMEmoji.symbolToEmoji(message);
        //     appendChild('symbolToEmoji: ' + message);
        //     return false;
        // };
        //
        // //emoji表情 【转】表情文字
        // var emojiToSymbol = document.getElementById("emoji-symbol");
        // emojiToSymbol.onclick = function(){
        //     var message = chatbox.value;  //文本消息区输入的内容
        //     message = RongIMEmoji.emojiToSymbol(message);
        //     appendChild('emojiToSymbol: ' + message);
        //     return false;
        // };

        //emoji表情 【转】html
        // var emojiToHtmlBtn = document.getElementById("emoji-html");
        // emojiToHtmlBtn.onclick = function(){
        //     var message = chatbox.value;  //文本消息区输入的内容
        //     message = RongIMEmoji.emojiToHTML(message, 33);
        //     appendChild('emojiToHtml: ' + message);
        //     return false;
        // };

        //文字 【转】html ----发送按钮
        var symbolToHtmlBtn = document.getElementById("symbol-html");
        symbolToHtmlBtn.onclick = function(){
            var message = chatbox.value;  //文本消息区输入的内容
            message = RongIMEmoji.symbolToHTML(message);
            appendChild('symbolToHtml: ' + message);
            return false;
        };
        //
        // //文字 【转】emoji （不支持形式）
        // var symbolToEmojiInvalid = document.getElementById("symbol-emoji-invalid");
        // symbolToEmojiInvalid.onclick = function() {
        //     var message = chatbox.value;
        //     var isSupportEmoji = RongIMEmoji.isSupportEmoji;
        //     message = RongIMEmoji.symbolToEmoji(message, function(emoji) {
        //         return isSupportEmoji ? emoji : '<span style="color: rgb(182, 182, 182)">[emoji]</span>';
        //     });
        //     appendChild('symbolToEmoji: ' + message);
        //     return false;
        // };

        //内容追加到消息内容展示区域
        function appendChild(text) {
            var div = document.createElement('div');
            div.innerHTML = '<li>' + text + '</li>';
            var child = div.childNodes[0];
            chatshow.appendChild(child);
        }

        //含有表情信息的html代码请求方法
        function getEmojiDetailList() {
            var shadowDomList = [];
            for (var i = 0; i < RongIMEmoji.list.length; i++) {
                var value = RongIMEmoji.list[i];
                shadowDomList.push(value.node);
            }
            return shadowDomList;
        }

        //循环处理，将含表情信息的HTML代码追加的存储表情的区域
        function bindClickEmoji(emojis) {
            for(var i=0;i<emojis.length;i++){
                var emojiHtml = emojis[i];
                panel.appendChild(emojiHtml);  //将html表情dom进行追加
                emojiHtml.onclick = clickEmoji;
            }
        }

        //表情区域：表情的点击事件
        function clickEmoji(event) {
            var e = event || window.event;
            var target = e.target || e.srcElement;  //当前表情的dom元素
            if (document.all && !document.addEventListener === false) {
                console.log(target);
            }
            chatbox.value = chatbox.value + target.getAttribute("name");
        }
    })();
</script>

</body>
</html>
